<template>
  <pro-table
    ref="table"
    title="活动列表"
    :request="getList"
    :columns="columns"
    :search="searchConfig"
    :pagination="paginationConfig"
    @selectionChange="handleSelectionChange"
  >
    <!-- 工具栏 -->
    <template #toolbar>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="$router.push('/activity/add')"
      >
        添加
      </el-button>
      <el-button type="primary" icon="el-icon-refresh" @click="refresh">
        刷新
      </el-button>
    </template>
    <template #lottery="scope">
      <el-button
        size="mini"
        @click="detailBox(scope.row)"

      >
        查看
      </el-button>
    </template>
    <template #operate="scope">
      <el-button
        size="mini"
        @click="$router.push(`/activity/manage/${scope.row.id}`)"

      >
        管理
      </el-button>
      <el-button
        v-if="scope.row.status !== '已关闭'"
        size="mini"
        type="primary"
        @click="$router.push(`/activity/edit/${scope.row.id}`)"
      >
        编辑
      </el-button>
      <el-popconfirm title="Are you sure to delete this?" @confirm="delActivity(scope.row.id)">
        <template #reference>
          <el-button size="mini" type="danger">Delete</el-button>
        </template>
      </el-popconfirm>
    </template>
    <template #timerange="scope">
      <span v-text="scope.row.start_time"></span> - <span v-text="scope.row.end_time"></span>
    </template>
  </pro-table>

<!--  活动详情-->
  <el-dialog
    v-model="detail.box"
    title="活动详情"
    width="70%"
  >
    <el-form  label-width="70px">
      <el-form-item label="活动状态">
        {{detail.info.status}}
      </el-form-item>
      <el-form-item label="奖品">
        <p v-for="(item,i) in detail.info.prize" :key="i">
          {{item.name}}:
          <el-badge :value="item.count" class="item" type="warning">
          <el-button size="small">{{item.award}}</el-button>
        </el-badge>
        </p>

      </el-form-item>
      <el-form-item label="结果">
        <p v-for="(item,i) in detail.info.prize" :key="i">
          {{item.name}} : <el-button size="small" v-for="(n,m) in detail.info.palm[i]" :key="m">{{n.name}}</el-button>
        </p>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="detail.box = false"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>

</template>

<script>
import { defineComponent, reactive, ref, toRefs } from "vue";
import { delActivity, getActivityList } from "@/api/activity";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: 'ActivityList',
  setup() {
    const state = reactive({
      detail: {
        box: false,
        info: {},
      },
      // 表格列配置，大部分属性跟el-table-column配置一样
      columns: [
        { type: 'selection' },
        { label: '序号', prop: 'id', width: 60 },
        { label: '活动名称', prop: 'title', sortable: true, width: 220 },
        { label: '活动描述', prop: 'description' },
        { label: '活动状态', prop: 'status' },
        { label: '活动详细', tdSlot: 'lottery' },
        { label: '活动时间', tdSlot: 'timerange' },
        {
          label: '操作',
          fixed: 'right',
          width: 240,
          align: 'left',
          tdSlot: 'operate', // 自定义单元格内容的插槽名称
        },
      ],
      // 搜索配置
      searchConfig: {
        labelWidth: '90px', // 必须带上单位
        inputWidth: '360px', // 必须带上单位
        fields: [
          {
            type: 'text',
            label: '活动名称',
            name: 'title',
          },
          {
            label: '状态',
            name: 'status',
            type: 'select',
            defaultValue: '',
            options: [
              {
                name: '全部',
                value: '',
              },
              {
                name: '已发布',
                value: 1,
              },
              {
                name: '未发布',
                value: 0,
              },
            ],
          },
          {
            label: '创建时间',
            name: 'create_time',
            type: 'date',
          },
          {
            label: '日期范围',
            name: 'datetimerange',
            type: 'datetimerange',
            trueNames: ['startTime', 'endTime'],
            style: { width: '360px' },
          },
        ],
      },
      // 分页配置
      paginationConfig: {
        layout: 'total, prev, pager, next, sizes', // 分页组件显示哪些功能
        pageSize: 5, // 每页条数
        pageSizes: [5, 10, 20, 50],
        style: { textAlign: 'left' },
      },
      selectedItems: [],
      batchDelete() {
        console.log(state.selectedItems)
      },
      // 选择
      handleSelectionChange(arr) {
        state.selectedItems = arr
      },
      // 请求函数
      async getList(params) {
        // params是从组件接收的，包含分页和搜索字段。
        const { data } = await getActivityList(params)

        // 必须要返回一个对象，包含data数组和total总数
        return {
          data: data.list,
          total: data.total,
        }
      },
    })
    const table = ref(null)
    const refresh = () => {
      table.value.refresh()
    }
    const methods = {
      detailBox(data) {
        state.detail.info = data
        state.detail.box = true
      },
      async delActivity(aid) {
        let resp = await delActivity(aid)
        if (resp.code !== 200) {
          ElMessage({
            message: resp.message || '服务器错误！',
            type: 'error',
          })
        } else {
          table.value.refresh()
          ElMessage({
            message: resp.message || 'ok',
            type: 'success',
          })
        }
      }
    }
    return { ...toRefs(state), refresh, table, ...methods }
  },
})
</script>
